<template>
  <div class="Shopping">
    <div class="top">
      <div class="msd">
        <div>
          <span> 购物车 </span>
          <span style="color: rgb(252, 78, 78)">({{ quantity }})</span>
        </div>
        <div>
          <span class="guanli" @click="clear">{{ tiliteText }} </span>
        </div>
      </div>
    </div>
    <div v-if="this.$store.state.login">
      <div class="shangpingleibiao">
        <!-- 放置组件的div -->
        <div v-if="show">
          <div class="list">
            <Orderlist
              :ShoppingCartList="merchandise"
              @fromChild="getChild"
            ></Orderlist>
          </div>
        </div>

        <div class="imgs" v-else>
          <img src="../assets/gwc.png" alt="" />
          <span>你的购物车空空如也</span>
        </div>
        <!-- 规格选择 -->
        <div v-if="sguger">
          <!-- 商品规格复选框 -->
          <guger :specification="specification"></guger>
        </div>
      </div>
    </div>

    <!--没有登录显示  -->
    <div class="nologin" v-else>
      <div class="nologinimg">
        <img src="../assets/bden.png" alt="" />
      </div>
      <div class="nologinText">
        <span>您未登录...</span>
        <span @click="tologin">去登录</span>
      </div>
    </div>

    <div class="tujianbeij">
      <ul class="tjian">
        <li>你可能还会喜欢</li>
      </ul>
      <!-- 购物车推荐列表 -->
      <div class="liebiao">
        <Lazyloading :waterData="waterInfo"></Lazyloading>
      </div>
    </div>
    <div class="submit">
      <!-- 提交订单按钮 -->
      <submit :switch="text"></submit>
    </div>
    <Tabbar :dots="quantity"></Tabbar>
  </div>
</template>
<style lang="less" scoped>
.shangpingleibiao {
  padding-top: 50px;
}
.liebiao {
  margin-top: 10px;
  padding-bottom: 50px;
}
.imgs {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100px;
  img {
    height: 50px;
    width: 50px;
    margin-bottom: 10px;
  }
  span {
    font-size: 17px;
    color: rgb(184, 182, 182);
  }
}
.tujianbeij {
  background-color: @background;
  padding-bottom: 50px;
}
.Shopping {
  // .shangpingleibiao {
  //   // height: 100%;
  // }
  // height: 1000px;  padding-bottom: 40px;
  background-color: @background;
  // padding-bottom: 20px;
  height: 100%;
  // padding-bottom: 40px;
  .list {
    background-color: @background;
  }
  .top {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 55;
    // .sj();
    width: 100%;
    background: rgb(255, 255, 255);
    .msd {
      // .sj();
      margin-right: 10px;
      margin-left: 10px;
      display: flex;
      // justify-content: center;
      align-items: center;
      // border: 1px solid #000;
      height: 50px;
      justify-content: space-between;
      .guanli {
        padding: 5px 5px 5px 5px;
        border-radius: 5px;
        color: rgb(255, 255, 255);
        background-color: rgb(223, 99, 99);
      }
      & div:nth-child(1) {
        display: flex;
        // align-items: center;
        justify-content: center;
      }
      & div:nth-child(1) span {
        &:nth-child(1) {
          font-size: 17px;
        }
        &:nth-child(2) {
          font-size: 13px;
        }
      }
      & div:nth-child(2) span {
        &:nth-child(1) {
          font-size: 13px;
        }
      }
    }
  }
  .submit {
    position: fixed;
    height: 50px;
    bottom: 50px;
    left: 0;
  }
}

.nologin {
  display: flex;
  height: 400px;
  // border: 1px solid #000;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .nologinimg {
    height: 150px;
    width: 100px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .nologinText {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    span {
      &:nth-child(1) {
        font-size: 17px;
        color: rgb(148, 147, 147);
      }
      &:nth-child(2) {
        display: block;
        margin-top: 10px;
        height: 25px;
        width: 80px;
        border-radius: 5px;
        line-height: 25px;
        text-align: center;
        color: rgb(245, 245, 245);
        background-color: rgb(52, 163, 238);
      }
    }
  }
}

.tjian {
  margin-top: 15px;
  text-align: center;
  font-size: 17px;
  color: rgb(235, 107, 107);
}
</style>
<script>
import Lazyloading from "../components/Lazyloading.vue";
import { PullRefresh } from "vant";
import { Toast } from "vant";
import API from "../http/API";
import submit from "../components/Shapping/submit.vue";
import guger from "../components/particulars/guger.vue";
import Tabbar from "@/components/Tabbar.vue";
import { Sticky } from "vant";
import { SwipeCell } from "vant";
import { Card } from "vant";
import { Button } from "vant";
import Orderlist from "../components/orderlist.vue";
export default {
  name: "aodbe",
  components: {
    Tabbar,
    Orderlist,
    submit,
    [SwipeCell.name]: SwipeCell,
    [Toast.name]: Toast,
    [Card.name]: Card,
    [Button.name]: Button,
    [Sticky.name]: Sticky,
    [PullRefresh.name]: PullRefresh,
    guger,
    Lazyloading,
  },

  data() {
    return {
      tiliteText: "管理",
      merchandise: [],
      quantity: 0,
      // 商品列表规格的数据
      specification: [],
      text: 0,
      mins: false,
      isRouterAlive: true,
      waterInfo: [],
      complete: [],
      show: true,
      sguger: false,
    };
  },

  created() {
    this.guanb();
    this.http();
    // console.log("123456486");
    this.updateZhuJian();
  },
  activated() {
    this.guanb();
    this.http();
    // console.log("123456486");
    this.updateZhuJian();
  },
  deactivated() {
    window.removeEventListener("scroll", this.handleScroll);
  },

  mounted() {},
  provide() {
    return {
      reload: this.http,
    };
  },
  methods: {
    tologin() {
      return this.$router.push("/login");
    },
    // 管理按钮
    // 刷新页面组件
    updateZhuJian() {
      this.sguger = false;
      this.$nextTick(() => {
        this.sguger = true;
        this.$forceUpdate();
      });
    },
    clear() {
      if (this.text == 0) {
        this.text = 1;
        this.tiliteText = "取消";
      } else {
        this.text = 0;
        this.tiliteText = "管理";
      }
    },

    // 请求网络数

    http() {
      this.$nextTick(() => {
        this.$get(API.GET_CART_INDEX, {
          token: this.$store.state.token,
        }).then((res) => {
          if (res.errmsg == "请登录") {
            localStorage.removeItem("token");
            console.log("删除logo");
          }
          if (res.errmsg == "成功") {
            let arr = [];
            this.$store.commit("shoppingAmount", res.data.cartList.length);
            // console.log("走了生命周期"+this.$store.state.shoppingamount);
            for (let index = 0; index < res.data.cartList.length; index++) {
              // console.log(res.data.cartList);
              arr.push(res.data.cartList[index].productId);
            }
            if (arr.length > 0) {
              this.$post(API.POST_CART_CHECKED, {
                //         ①封装 token
                // ②productIds: 当前商品指定规格的商品 ID,
                // ③isChecked：是否选择
                token: this.$store.state.token,
                productIds: arr,
                isChecked: false,
              }).then((res) => {
                // console.log(res.data);

                this.mins = true;
                if (res.errmsg == "成功") {
                  this.$store.commit("tijiao", true);

                  this.merchandise = res.data;
                  this.show = true;
                  this.quantity = this.merchandise.cartList.length;

                  // console.log(this.merchandise.cartList.length);
                }
              });
            } else {
              this.show = false;
              this.$store.commit("tijiao", false);
              this.quantity = 0;
            }
            // 把默认选中的全部取消
          }

          // console.log(142);
        });
        this.nadaoshuju();
        this.$forceUpdate();
      });
    },

    handleScroll() {
      let scrollTop = window.pageYOffset;
      this.$route.meta.Yaxis = scrollTop;
    },
    guanb() {
      window.addEventListener("scroll", this.handleScroll);
    },
    getChild(val) {
      // console.log(val);
      // 发起网络请求拿到商品详情规格
      this.$get(API.GET_COMMODITY_DETALI, {
        id: val.goodsId,
      }).then((res) => {
        // console.log(res);
        this.$nextTick(() => {
          this.specification = res.data.productList;
          this.specification.shuliang = val.number;
          // this.specification.push(val.number)
          // console.log(this.specification);

          this.$forceUpdate();
        });
      });
    },

    nadaoshuju() {
      let complete = [];
      this.$get(API.GET_HOME_INFO, {}).then((res) => {
        // console.log(res.data);

        if (res.errmsg == "成功") {
          complete.push(res.data.newGoodsList);
          complete.push(res.data.hotGoodsList);
          complete.push(res.data.grouponList);
          if (complete.length != this.complete.length) {
            this.complete = complete;
            this.gather(this.complete);
          }
        }
      });
    },

    // 进行数据的聚合
    gather(e) {
      // console.log(e);
      for (let index = 0; index < e.length; index++) {
        for (let i = 0; i < e[index].length; i++) {
          this.waterInfo.push(e[index][index]);
        }
      }

      // console.log(this.waterInfo);
    },
  },
};
</script>